@import "../style/var";

.em-goods-block {
  position: relative;
  box-sizing: border-box;
  color: $--card-text-color;
  font-size: $--card-font-size;
  &:root {
    --goods-thumb-scale: 100%;
  }
  &__header {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  &__thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: $--card-thumb-border-radius $--card-thumb-border-radius 0 0;

    &::after {
      padding-top: var(--goods-thumb-scale, 100%);
      content: "";
      display: block;
    }
    > * {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: $--card-thumb-border-radius;
    }
  }

  &__badge {
    width: auto;
  }

  &__content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    &--centered {
      justify-content: center;
      text-align: center;
    }
  }

  &__title,
  &__desc {
    word-wrap: break-word;
  }

  &__title {
    max-height: 32px;
    font-weight: $--font-weight-bold;
    line-height: $--card-title-line-height;
    text-align: left;
    padding: 2px 0;
    font-size: $--font-size-md;
    &-inner {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;
      border-radius: 0 0 $--card-thumb-border-radius $--card-thumb-border-radius;
      font-size: $--card-font-size;
    }
  }

  &__desc {
    max-height: $--card-desc-line-height;
    color: $--card-desc-color;
    line-height: $--card-desc-line-height;
  }

  &__bottom {
    line-height: $--line-height-md;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__price {
    display: inline-block;
    color: $--card-price-color;
    font-weight: $--font-weight-bold;
    font-size: $--card-price-font-size;
  }

  &__price-integer {
    font-size: $--card-price-integer-font-size;
    font-family: $--card-price-font-family;
  }

  &__price-decimal {
    font-family: $--card-price-font-family;
  }

  &__origin-price {
    display: inline-block;
    color: $--card-origin-price-color;
    font-size: $--card-origin-price-font-size;
    text-decoration: line-through;
  }
  &__origin-price + &__desc {
    flex: 1;
    text-align: right;
  }

  &__tags {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    > * {
      height: 15px;
      margin: 2px 2px 2px 0;
    }
  }

  &__tag {
    position: absolute;
    top: 2px;
    left: 0;
  }

  &__footer {
    flex: none;
    text-align: right;

    .el-button {
      margin-left: 5px;
    }
  }
}
